<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    width="70%"
    class="full_screen_dialog "
    :visible.sync="visible"
  >
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="120px" @keyup.enter.native="dataFormSubmit()">
      <el-row>
        <el-col :span="14">
          <el-form-item label="  广告类型" prop="positiontype">
            <!-- <el-input v-model="dataForm.positiontype" placeholder=" 广告类型"></el-input> -->
            <el-select v-model="dataForm.positiontype" style="width: 100%" placeholder="请选择" @change="changeType">
              <el-option
                v-for="item in positiontypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="广告位置" prop="adpositionid">
            <el-select v-model="dataForm.adpositionid" style="width: 100%" placeholder="请选择" @change="note">
              <el-option
                v-for="item in adpositions"
                :key="item.positionid"
                :label="item.positionname"
                :value="item.positionid"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="广告名称" prop="adname">
            <el-input v-model="dataForm.adname" placeholder="广告名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="副标题">
            <el-input v-model="dataForm.subtitle" placeholder="副标题" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="上传图片" prop="adfile">
            <el-input v-model="dataForm.adfile" placeholder="图片路径" :readonly="true">
              <el-upload
                slot="append"
                :show-file-list="false"
                accept="image/png,image/gif,image/jpg,image/jpeg"
                :on-success="handleAvatarSuccess"
                :action="uploadUrl"
                :with-credentials="true"
                :data="photo"
                class="upload-demo"
              >
                <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
              </el-upload>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <img v-if="dataForm.adFullfile" :src="dataForm.adFullfile" style="width:99%;height:34px">
        </el-col>
        <el-col :span="8">
          <div style="height: 36px;line-height: 36px;color:red">
            &nbsp;&nbsp;请上传{{ photo.width }} * {{ photo.height }}的图片;图片格式 png/jpg/jpeg
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="广告网址">
            <el-input v-model="dataForm.adurl" placeholder="广告网址">
              <template slot="prepend">Http://</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="广告开始日期" prop="adstartdate">
            <el-date-picker
              v-model="dataForm.adstartdate"
              style="width: 100%"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="广告结束日期" prop="adenddate">
            <el-date-picker
              v-model="dataForm.adenddate"
              style="width: 100%"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="排序" prop="adsort">
            <el-input v-model="dataForm.adsort" placeholder="排序号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="text-align: right;">
          <el-button size="mini" icon="el-icon-close" @click="visible = false">取消</el-button>
          <el-button size="mini" icon="el-icon-check" type="primary" @click="dataFormSubmit()">确定</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '明天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 1)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周后',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }, {
          text: '二周后',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 14)
            picker.$emit('pick', date)
          }
        }, {
          text: '三周后',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 21)
            picker.$emit('pick', date)
          }
        }]
      },
      visible: false,
      uploadUrl: this.$http.adornUrl(`/system/file/uploadadvertPhoto`),
      positiontypes: [{
        value: 1,
        label: 'PC'
      }, {
        value: 2,
        label: 'Mobile'
      }],
      photo: {
        width: '100',
        height: '100'
      },
      adpositions: [],
      dataForm: {
        adid: 0,
        adpositionid: '',
        adfile: '',
        adname: '',
        adurl: '',
        adstartdate: '',
        adenddate: '',
        adsort: '',
        adclicknum: '',
        positiontype: '-1',
        dataflag: '',
        createtime: '',
        subtitle: '',
        creator: '',
        updatetime: '',
        updater: '',
        adFullfile: ''
      },
      dataRule: {
        adpositionid: [
          { required: true, message: '位置id不能为空', trigger: 'blur' }
        ],
        adfile: [
          { required: true, message: '广告文件不能为空', trigger: 'blur' }
        ],
        adname: [
          { required: true, message: '广告名称不能为空', trigger: 'blur' }
        ],
        adurl: [
          { required: true, message: '广告网址不能为空', trigger: 'blur' }
        ],
        adstartdate: [
          { required: true, message: '	广告开始日期不能为空', trigger: 'blur' }
        ],
        adenddate: [
          { required: true, message: '广告结束日期不能为空', trigger: 'blur' }
        ],
        adsort: [
          { required: true, message: '排序号不能为空', trigger: 'blur' }
        ],
        adclicknum: [
          { required: true, message: '广告点击数不能为空', trigger: 'blur' }
        ],
        positiontype: [
          { required: true, message: '	广告类型不能为空', trigger: 'blur' }
        ],
        dataflag: [
          { required: true, message: '删除标记位不能为空', trigger: 'blur' }
        ],
        createtime: [
          { required: true, message: '创建时间不能为空', trigger: 'blur' }
        ],
        subtitle: [
          { required: true, message: '副标题不能为空', trigger: 'blur' }
        ],
        creator: [
          { required: true, message: '创建人不能为空', trigger: 'blur' }
        ],
        updatetime: [
          { required: true, message: '修改时间不能为空', trigger: 'blur' }
        ],
        updater: [
          { required: true, message: '修改人不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    changeType(value) {
      this.$nextTick(() => {
        this.adpositions = []
        // this.dataForm.adpositionid = 0
        // this.photo.width = 100
        // this.photo.height = 100
        if (value) {
          this.$http({
            url: this.$http.adornUrl(`/cms/adpositions/dropdownlist/${value}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.adpositions = data.list
            }
          })
        }
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 10
      this.dataForm.adfileName = file.Name
      if (!isJPG) {
        this.$message.error('上传广告图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传广告图片大小不能超过 10MB!')
      }
      return isJPG && isLt2M
    },
    handleAvatarSuccess(response, file, fileList) {
      if (response.code === 0 && response.file) {
        this.dataForm.adfile = response.file.sysFileEncryptionName
        this.dataForm.adFullfile = this.$http.adornUrl(`/system/file/downloadadvertPhoto/${response.file.sysFileEncryptionName}`)
      } else {
        this.$message.error(response.msg)
      }
    },
    note(value) {
      const findVal = this.adpositions.find(item => {
        return item.positionid === value
      })
      const result = findVal
      this.photo.width = result.positionwidth
      this.photo.height = result.positionheight
    },
    init(id) {
      this.dataForm.adid = id || 0
      this.dataForm.subtitle = ''
      this.photo.width = 100
      this.photo.height = 100
      this.dataForm.positiontype = null
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.dataForm.adFullfile = ''
        if (this.dataForm.adid) {
          this.$http({
            url: this.$http.adornUrl(`/cms/ads/info/${this.dataForm.adid}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.adpositionid = data.Ads.adpositionid
              this.dataForm.adfile = data.Ads.adfile
              this.dataForm.adname = data.Ads.adname
              this.dataForm.adurl = data.Ads.adurl
              this.dataForm.adstartdate = data.Ads.adstartdate
              this.dataForm.adenddate = data.Ads.adenddate
              this.dataForm.adsort = data.Ads.adsort
              this.dataForm.adclicknum = data.Ads.adclicknum
              this.dataForm.positiontype = data.Ads.positiontype
              this.dataForm.dataflag = data.Ads.dataflag
              this.dataForm.createtime = data.Ads.createtime
              this.dataForm.subtitle = data.Ads.subtitle
              this.dataForm.creator = data.Ads.creator
              this.dataForm.updatetime = data.Ads.updatetime
              this.dataForm.updater = data.Ads.updater
              this.changeType(this.dataForm.positiontype)
              this.note(this.dataForm.adpositionid)
              if (this.dataForm.adfile) {
                this.dataForm.adFullfile = this.$http.adornUrl(`/system/file/downloadadvertPhoto/${this.dataForm.adfile}`)
              }
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/cms/ads/${!this.dataForm.adid ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'adid': this.dataForm.adid || undefined,
              'adpositionid': this.dataForm.adpositionid,
              'adfile': this.dataForm.adfile,
              'adname': this.dataForm.adname,
              'adurl': this.dataForm.adurl,
              'adstartdate': this.dataForm.adstartdate,
              'adenddate': this.dataForm.adenddate,
              'adsort': this.dataForm.adsort,
              'adclicknum': this.dataForm.adclicknum,
              'positiontype': this.dataForm.positiontype,
              'dataflag': this.dataForm.dataflag,
              'createtime': this.dataForm.createtime,
              'subtitle': this.dataForm.subtitle,
              'creator': this.dataForm.creator,
              'updatetime': this.dataForm.updatetime,
              'updater': this.dataForm.updater
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
